<template>
  <div class="layout-page bg-#f8f9fe pt-32px">
    <div class="layout-page-inner box-border bg-#fff w-1328px py-70px">
      <h3 class="font-size-24px fw-500 text-center mb-57px">申请认证</h3>
      <el-form
        class="apply-form w-60% mx-auto"
        ref="authForm"
        :model="formData"
        :rules="rules"
        label-position="right"
        :label-width="130"
      >
        <el-form-item label="公司类型" prop="companyType">
          <el-radio-group v-model="formData.companyType">
            <el-radio :value="1">供应商</el-radio>
            <el-radio :value="2" :disabled="userType && userType === 4"
              >企业用户</el-radio
            >
            <el-radio
              :value="3"
              :disabled="userType && (userType === 5 || userType === 4)"
              >开发者</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <template v-if="formData.companyType !== 3">
          <el-form-item label="公司名" prop="companyName">
            <el-input
              v-model="formData.companyName"
              placeholder="请输入"
              :maxlength="20"
            ></el-input>
          </el-form-item>
          <el-form-item label="公司地址" prop="companyAddress">
            <el-input
              v-model="formData.companyAddress"
              placeholder="请输入"
              :maxlength="50"
            ></el-input>
          </el-form-item>
        </template>

        <el-form-item label="联系人" prop="companyContact">
          <el-input
            v-model="formData.companyContact"
            placeholder="请输入"
            :maxlength="10"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="companyContactMobile">
          <el-input
            v-model="formData.companyContactMobile"
            placeholder="请输入"
            :maxlength="11"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="companyEmail">
          <el-input
            v-model="formData.companyEmail"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <template v-if="formData.companyType !== 3">
          <el-form-item label="营业执照" prop="companyLicense">
            <div
              @click="doUpload('companyLicense')"
              class="cursor-pointer w-160px h-160px overflow-hidden"
            >
              <img
                v-if="formData.companyLicense"
                :src="formData.companyLicense"
                class="w-full h-full b-rd-4px"
                alt=""
              />
              <div
                v-else
                class="w-160px h-160px box-border flex items-center justify-center b-rd-4px b-1px b-#dcdfe6 b-dashed"
              >
                <el-icon><Plus /></el-icon>
              </div>
            </div>
          </el-form-item>
        </template>
        <el-form-item label="身份证正反面" v-if="formData.companyType === 3">
          <el-form-item prop="idCardUrlFront">
            <div
              @click="doUpload('idCardUrlFront')"
              class="cursor-pointer w-200px h-140px overflow-hidden"
            >
              <img
                v-if="formData.idCardUrlFront"
                :src="formData.idCardUrlFront"
                class="w-full h-full b-rd-4px"
                alt=""
              />
              <div
                v-else
                class="w-full h-full box-border flex items-center justify-center b-rd-4px b-1px b-#dcdfe6 b-dashed"
              >
                <el-icon><Plus /></el-icon>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="idCardUrlBack" class="ml-20px">
            <div
              @click="doUpload('idCardUrlBack')"
              class="cursor-pointer w-200px h-140px overflow-hidden"
            >
              <img
                v-if="formData.idCardUrlBack"
                :src="formData.idCardUrlBack"
                class="w-full h-full b-rd-4px"
                alt=""
              />
              <div
                v-else
                class="w-full h-full box-border flex items-center justify-center b-rd-4px b-1px b-#dcdfe6 b-dashed"
              >
                <el-icon><Plus /></el-icon>
              </div>
            </div>
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="mt-36px h-48px w-108px b-rd-0"
            :loading="confirmLoading"
            @click="handleSubmit"
            >确认提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { Plus } from "@element-plus/icons-vue";
import { useLoading } from "@/hooks";
import { phoneValidator } from "@/utils/valid";
import { getFile } from "@/utils/dom";
import { shardUpload } from "@/utils/shardUpload";

const authForm = ref();
const formData = ref({
  companyType: 1,
  companyName: "",
  companyAddress: "",
  companyEmail: "",
  companyContact: "",
  companyContactMobile: "",
  companyLicense: "",
  idCardUrlFront: "",
  idCardUrlBack: "",
});
const rules = reactive({
  companyName: [{ required: true, message: " 请输入公司名" }],
  companyAddress: [{ required: true, message: " 请输入公司地址" }],
  companyContact: [{ required: true, message: " 请输入联系人" }],
  companyEmail: [{ required: true, message: " 请输入邮箱" }],
  companyContactMobile: [{ required: true, validator: phoneValidator }],
  companyLicense: [{ required: true, message: "请上传营业执照" }],
  idCardUrlFront: [{ required: true, message: "请上传身份证正面" }],
  idCardUrlBack: [{ required: true, message: "请上传身份证反面" }],
});

const userType = ref(null);

const { loading: confirmLoading, setLoading } = useLoading();

const doUpload = async (field) => {
  const file = await getFile();
  const data = await shardUpload(file);
  if (!data) return ElMessage.error("上传失败");
  formData.value[field] = data.url;
  authForm.value.validateField(field);
};

const $api = inject("$api");
const router = useRouter();
const handleSubmit = async () => {
  authForm.value.validate(async (valid) => {
    if (!valid) return;
    const submitData = toValue(formData);
    submitData.idCardUrl = `${submitData.idCardUrlFront},${submitData.idCardUrlBack}`;
    setLoading(true);
    try {
      await $api.company.doAuth(submitData);
      ElMessage.success("申请成功");
      setTimeout(() => {
        router.push("/userCenter");
      }, 500);
    } finally {
      setLoading(false);
    }
  });
};

const route = useRoute();
onMounted(() => {
  if (route.query.userType) {
    userType.value = Number(route.query.userType);
  }
});
</script>
